<template>
  <div class="home">
  <el-container style="height: 500px; border: 1px solid #eee">
  <el-aside :width="$store.state.isCollapse ? 'auto' :'200px'" style="background-color: rgb(84, 92, 100)">
    <CommonAside></CommonAside>
  </el-aside>
   
  <el-container>
    <el-header style=" font-size: 12px">
      <div>
        <i class="el-icon-s-unfold" @click="opens" v-if="$store.state.isCollapse" style="font-size: 20px;"></i>
        <i class="el-icon-s-fold" @click="opens" v-else style="margin-right: 15px;"></i>
      </div>
    <div>
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native ="outLogin">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{ $store.state.name }}</span>
      </div>
    </el-header>
    
    <el-main>
    <!-- 组件的缓存
        keep-alive  默认缓存所有组件
        include="index" 缓存指定组件（用name给组件起个名字）
        exclude="index" 排除指定组件

    -->
       <keep-alive  include="index">
          <!-- 给子路由页面一个出口 -->
          <router-view></router-view>
       </keep-alive>
        
    </el-main>
  </el-container>
</el-container>

  </div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue"
export default {
    data() {
      return{

      }
    },
    methods:{
      outLogin(){
         this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch("outlogin")
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      opens(){
        this.$store.dispatch("collapse")
      
      }
    },
    components:{
      CommonAside
    }
  };
</script>
<style scoped lang="scss">
/* ::c-deep 样式穿透 组件嵌套太多 样式改不动 */
::v-deep .el-container{
  height: 100vh !important;
  border: none !important;
}
::v-deep .el-menu{
  border: none !important;
}
 .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }
  
  .el-aside {
    color: #333;
  }
</style>